<script setup lang="ts">
//文章页
import Left from "@/components/home/left/index.vue";
import Right from "@/components/home/right/index.vue";
//import WidgetsSingle from "@/components/page/widgets-single.vue";

</script>
<template>
  <main
    class="lg:w-1220-px lg:m-auto lg:flex justify-between lg:mt-10 lg:overflow-hidden main"
  >
    <!--
      左边
    -->
    <div class="tab bg-white hidden lg:block lg:shadow-lg rounded-xl">
      <Left />
    </div>
    <!--
      右边
    -->
    <div class="content bg-white lg:shadow-lg rounded-xl">
      <div class="lg:h-full">
        <Right />
      </div>
    </div>
  </main>
  <!--
  <WidgetsSingle />
  -->
</template>
<style scoped lang="less">
.tab {
  height: 100%;
  width: 297px;
  overflow: hidden;
}

.tab,
.content {
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  //TODO:不明白，为啥这里写的css不生效
  .main {
    width: 1220px;
  }
  .content {
    width: 913px;
    height: auto;
  }
}
</style>
